import { useState } from 'react';
import { Button, Space } from 'antd';
import PropTypes from 'prop-types';

const ButtonGroup = ({ options, defaultValue, onChange }) => {
  const [active, setActive] = useState(defaultValue || null);

  const handleButtonClick = (value) => {
    setActive(value);
    onChange && onChange(value);
  };

  return (
    <div>
      <Space>
        {options.map((option, index) => {
          return (
            <Button
              key={`button${index}`}
              onClick={() => handleButtonClick(option.value)}
              type={active === option.value ? 'primary' : 'normal'}
            >
              {option.label}
            </Button>
          );
        })}
      </Space>
    </div>
  );
};

ButtonGroup.propTypes = {
  options: PropTypes.arrayOf(Object),
};

ButtonGroup.defaultProps = {
  options: [],
};

export default ButtonGroup;
